<template>
  <view class="box">
    <uv-navbar placeholder title="退货物流填写" :autoBack="true"></uv-navbar>
    <view class="mallProd m-t-32 p-24 m-b-20" v-if="wlInfo">
      <view class="flex">
        <view class="position-relative">
          <uv-image width="192rpx" height="192rpx" :src="wlInfo?.products[0].image" radius="12rpx"></uv-image>
          <view class="yingyin position-absolute">
            共{{ wlInfo?.products.length }}件
          </view>
        </view>
        <view class="flex-1 flex-col m-l-20">
          <view class="flex justify-bet align-ali">
            <view class="font-30">
              {{ wlInfo?.products[0].product_name }}
            </view>
          </view>
          <view class="flex m-t-25 flex-wrap" v-if="wlInfo?.products[0].add_type == 1">
            <view class="content font-28 m-r-20 p-x-14 p-y-6"
              v-for="(item, index) in wlInfo?.products[0].suk.split(',')" :key="index">
              {{ item }}
            </view>
          </view>
          <view class="m-b-30 m-t-10 " style="gap: 20rpx" v-else>
            <view class="font-26 font-weight-middle"> 实际周长:{{ wlInfo?.products[0].reality_size }}cm</view>
            <view class="font-26 m-t-10 font-weight-middle"> {{ wlInfo?.products[0].suk.line.product_name }}({{
              wlInfo?.products[0].suk.line.suk
            }}){{ wlInfo?.products[0].total_number || '0' }}颗珠子
              <!-- {{wlInfo?.products[0].suk.materials.map(item2 => item2.product_name + 'x'
                +
                item2.number).join('、')}} -->
            </view>
          </view>
          <view class="flex m-t-28 justify-bet align-ali">
            <view class="font-26">
              x{{ wlInfo?.products[0].number }}
            </view>
            <view class="font-26 font-weight-bold">
              ￥{{ wlInfo?.products[0].number * (wlInfo?.products[0].price / 100) }}
            </view>
          </view>
        </view>
      </view>
      <view class="shu m-t-30"></view>
      <view class="font-24 m-t-18 text-greey">
        {{ wlInfo?.express_info?.express_company }} {{ wlInfo?.express_info?.express_number }}
      </view>
    </view>
    <logistics :wlInfo="wlInfo"></logistics>
  </view>
</template>

<script setup>
import { queryExpress } from '@/api/api';
import { ref, onMounted, reactive } from 'vue';
import Logistics from '@/components/xinyu-logistics/xinyu-logistics.vue'
import { useStore } from 'vuex';
import { onReachBottom, onShow, onReady, onLoad } from '@dcloudio/uni-app';
import { os, sys } from '@/uni_modules/uv-ui-tools/libs/function/index.js';
import route from '@/uni_modules/uv-ui-tools/libs/util/route.js';
import { timeFormat } from '@/uni_modules/uv-ui-tools/libs/function/index.js';
const orderSn = ref(null)//订单号
const wlInfo = ref(null)

onLoad((options) => {
  if (options.orderSn) {
    orderSn.value = options.orderSn
    querydata()
  }
})
// 物流信息
const querydata = () => {
  queryExpress({
    order_sn: orderSn.value
  }).then(res => {
    console.log(res, '物流信息');
    if (res.code == 1) {
      wlInfo.value = res.data

    } else {
      uni.showToast({
        title: res.msg,
        icon: 'none'
      })
      setTimeout(() => {
        uni.navigateBack()
      }, 1000)
    }
  })
}
</script>

<style lang="scss">
.box {
  min-height: 100vh;
  background-color: #F5F5F5;
}

.mallProd {
  width: 686rpx;
  margin: 0 auto;

  background: #FFF;

  .content {
    background: #F3F3F3;
    border-radius: 12rpx;
  }
}

.yingyin {
  width: 100%;
  height: 42rpx;
  background: rgba(0, 0, 0, 0.4);
  bottom: 0;
  left: 0;
  text-align: center;
  line-height: 42rpx;
  color: #FFF;
  font-size: 24rpx;
}

.shu {
  width: 634rpx;
  height: 2rpx;
  background: #D9D9D9;

}
</style>
